<!--
 * @Author: panda
 * @Date: 2022-05-18 09:33
 * @Description: 文章详情
-->
<template>
  <el-row>
    <el-col :span="5" />
    <el-col :span="14">
      <div class="container">
        <el-image
          style="width: 100%; height: 100%;"
          :src="article.thumbnail" v-show="!!article.thumbnail" />
        <h1 style="margin:20px 0 20px 0;font-size: 30px">{{ article.title }}</h1>
        <div id="viewer">
          <MarkdownViewer :value="article.content" />
        </div>
        <span>发布于 {{ article.createTime }}</span><br />
        <div style="margin:20px 0 20px 0">
          <el-button type="primary" plain round size="large">{{ article.categoryName }}</el-button>
        </div>
        <el-space size="large">
          <el-button type="primary" plain style="border: none" size="large">
            <el-icon>
              <caret-top />
            </el-icon>
            点赞
          </el-button>
          <el-button color="#626aef" type="primary" plain style="border: none" size="large">
            <el-icon>
              <caret-bottom />
            </el-icon>
          </el-button>
        </el-space>
      </div>
      <div id="comment_id">
        <Comment />
      </div>
    </el-col>
    <el-col :span="5" />
  </el-row>
</template>
<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from 'vue'
import {CaretBottom, CaretTop} from '@element-plus/icons-vue'
import {MarkdownViewer} from '@/components/markdown'
import {articleApi} from "@/api/article";
import {useRoute} from "vue-router";
import {Article} from "@/api/model/article";
import {Comment} from "@/components/comment"

export default defineComponent({
  components: {CaretTop, CaretBottom, MarkdownViewer, Comment},
  setup() {
    const route = useRoute()
    // 初始化文章容器
    const articles = reactive(new Article())
    onMounted(() => {
      // 请求文章详情
      articleApi.getArticleDetail({id: route.params.id as unknown as number}).then(
        res => {
          // 解包
          const {data} = res.data
          articles.article = data
        }
      ).catch(
        err => {
          console.log(err)
        }
      )
    })
    return {
      ...toRefs(articles)
    }
  }
})
</script>

<style>
.tui-editor-contents p {
  color: #4a4a4a;
  font-size: 16px;
  line-height: 31px;
}

.container {
  margin: 0 auto;
}
</style>
